<div class="cx-search-facet">
  <ng-template [ngIf]="searchResult.breadcrumbs?.length">
    <h4 class="cx-search-facet-filter__header">Filter By</h4>
    <div class="cx-search-facet-filter__container">
      <div
        *ngFor="let breadcrumb of searchResult.breadcrumbs"
        [hidden]="breadcrumb.facetValueCode === activeFacetValueCode"
        class="cx-search-facet-filter__pill"
        role="filter"
      >
        <span>{{ breadcrumb.facetValueName }}</span>
        <button
          type="button"
          class="close"
          aria-label="Close"
          (click)="toggleValue(breadcrumb.removeQuery.query.value)"
        >
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
    </div>
  </ng-template>

  <ng-template ngFor let-facet [ngForOf]="visibleFacets" let-facetId="index">
    <div class="cx-search-facet-group">
      <span class="cx-search-facet-header">
        <a
          class="cx-search-facet-header__link"
          (click)="toggleFacet(facet.name)"
          [attr.aria-expanded]="!isFacetCollapsed(facet.name)"
          aria-controls=""
        >
          {{ facet.name }}
        </a>
      </span>
      <div [ngbCollapse]="isFacetCollapsed(facet.name)">
        <ul class="cx-search-facet-list">
          <li
            *ngFor="
              let value of getVisibleFacetValues(facet);
              index as facetValueId
            "
          >
            <div class="form-check">
              <label class="form-checkbox cx-search-facet-list__label">
                <input
                  class="form-check-input cx-search-facet-checkbox"
                  role="checkbox"
                  type="checkbox"
                  aria-checked="true"
                  [checked]="value.selected"
                  (change)="toggleValue(value.query.query.value)"
                />
                <span class="cx-search-facet-list__label-text"
                  >{{ value.name }} ({{ value.count }})</span
                >
              </label>
            </div>
          </li>
          <li
            class="cx-search-facet-list__toggle-button"
            (click)="showLess(facet.name)"
            *ngIf="showAllPerFacetMap.get(facet.name)"
          >
            Show less...
          </li>
          <li
            class="cx-search-facet-list__toggle-button"
            (click)="showMore(facet.name)"
            *ngIf="
              !showAllPerFacetMap.get(facet.name) &&
              facet.values.length > minPerFacet
            "
          >
            Show more...
          </li>
        </ul>
      </div>
    </div>
  </ng-template>
</div>

<div class="cx-search-facet__mobile">
  <button
    class="btn btn-action btn-block cx-search-facet__mobile--btn"
    (click)="openFilterModal(content)"
  >
    Filter by
  </button>
</div>

<!-- START ONLY SHOW FILTER SECTION IN MOBILE WHEN THEY ARE SELECTED -->
<div class="cx-search-facet__mobile" *ngIf="searchResult.breadcrumbs?.length">
  <div class="cx-search-facet-filter__container">
    <h4 class="cx-search-facet-filter__header">Applied Filter:</h4>
    <div
      class="cx-search-facet-filter__pill"
      role="filter"
      *ngFor="let breadcrumb of searchResult.breadcrumbs"
    >
      {{ breadcrumb.facetValueName }}
      <button
        type="button"
        class="close"
        aria-label="Close"
        (click)="toggleValue(breadcrumb.removeQuery.query.value)"
      >
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
  </div>
</div>

<!-- END ONLY SHOW FILTER SECTION IN MOBILE WHEN THEY ARE SELECTED -->

<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="cx-search-facet-modal__title" id="modal-title">Filter by</h4>
    <button
      type="button"
      class="close"
      aria-label="Close"
      (click)="d('Cross click')"
    >
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body cx-search-facet__modal-body">
    <form>
      <div
        class="form-group"
        *ngFor="let facet of searchResult.facets; index as facetId"
      >
        <h4 class="cx-search-facet__modal--label" for="megapixels">
          {{ facet.name }}
        </h4>
        <div class="input-group">
          <ul class="cx-search-facet-list">
            <li *ngFor="let value of facet.values; index as facetValueId">
              <div class="form-check">
                <label class="form-checkbox cx-search-facet-list__label">
                  <input
                    class="form-check-input cx-search-facet-checkbox"
                    role="checkbox"
                    type="checkbox"
                    aria-checked="true"
                    [checked]="value.selected"
                    (change)="toggleValue(value.query.query.value)"
                  />
                  <span class="cx-search-facet-list__label-text"
                    >{{ value.name }} ({{ value.count }})</span
                  >
                </label>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </form>
  </div>
</ng-template>
